<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CharVerification from '@/components/verification/CharVerification.vue';
import SliderVerification from '@/components/verification/SliderVerification.vue';

const route = useRoute();
const router = useRouter();
const showVerification = ref(false);
const verificationType = ref(null);

onMounted(() => {
  verificationType.value = Math.random() > 0.5 ? 'char' : 'slider';
  showVerification.value = route.params.requiresVerify === '1';
});

const handleVerificationSuccess = () => {
  // 验证通过后跳转回功能页面
  sessionStorage.setItem(`${route.query.section}`, '1')
  router.back();
};

</script>

<template>
  <div v-if="showVerification">
    <char-verification
        v-if="verificationType === 'char'"
        :next-url="''"
        @verification-success="handleVerificationSuccess"
    />
    <slider-verification
        v-else
        :next-url="''"
        @verification-success="handleVerificationSuccess"
    />
  </div>
</template>